<template>
	<xx-title title="赛事报名"/>
  <view>
	  <view class="hot-train-body" :scroll-x="true" v-if="matchList.length > 0">
	  <view class="hot-train-body-item" v-for="(item,index) in matchList" :key="index">
		<view class="hot-header">
		  <view class="title">{{item.categoryName}}</view>
		  <view class="icon">
			<!-- <u-icon name="play-circle-fill" color="#B5BCC9" size="20px"></u-icon> -->
		  </view>
		</view>
		<view class="hot-body">
		  <view class="hot-body-item">
			<view class="hot-body-left" @click="navigatorClick('/pages/matchDetails/matchDetails')">
			  <view class="hot-body-title">{{item.name}}</view>
			  <view class="hot-body-bottom">
<!--                  <view class="hot-body-sign">{{item.numberOfApplicants}}人已报名</view>-->
				<view class="hot-body-time" v-if="item.plannedStartTime && item.plannedCompletionTime">
				  {{item.plannedStartTime}} ~ {{item.plannedCompletionTime}}
				</view>
			  </view>
			</view>
			<view class="hot-body-right">
				<view class="hot-train-action" @click="navigatorClick('/pageSignUp/personalSignUp/matchSignUp')">
				  去报名
				</view>
			  <!-- <image :src=" item.banner && item.banner[0].fullUrl"/> -->
			</view>
		  </view>
		</view>
	  </view>
	</view>
	<up-empty v-else mode="list" iconSize="40"/>
  </view>
</template>
<script setup lang="ts">
	import { ref, inject  } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { getSportsHotList } from '@/api/index'
	
	const matchList =ref([{
		categoryName: '篮球',
		name:'2024四川“选星计划”篮球项目U系列锦标赛',
		plannedStartTime: '2024年12月',
		plannedCompletionTime: '2025年1月'
		
	}])
	
	onLoad(() => {
	  // getSports()
	})
	
	// 获取热门训练营
	const getSports = () => {
	  getSportsHotList().then(res => {
	    if (res.code == 200) {
	      matchList.value = res.data.data
	    }
	  })
	
	}
	
	const navigatorClick = (url:string) => {
	  uni.navigateTo({url})
	}
	
</script>
<style lang="scss" scoped>
	.hot-train-action{
	    color: #000;
	    font-size: 24rpx;
	    line-height: 20px;
	    border-radius: 52px;
	    padding: 4rpx 12rpx 4rpx 12rpx;
	    border: 1px solid rgba(129, 132, 150, 0.6);
		text-align:center
	}
	.hot-train-body{
	  //white-space: nowrap;
	  margin-top: 16rpx;
	  margin-bottom: 32rpx;
	  //background: linear-gradient(180deg, #F4F7EF 2%, #F6F7F5 100%);
	  //padding: 24rpx 32rpx;
	  //box-sizing: border-box;
	  //margin-top: 10rpx;
	  //border-radius: 15rpx;
	  .signup-btn{
		  text-align: right;
	  }
	  .hot-train-body-item{
	    display: inline-block;
	    width: 100%;
	    padding: 24rpx 32rpx;
	    border-radius: 16rpx;
	    margin-top: 15rpx;
	    box-shadow: 0 3px 14px 2px rgba(167, 217, 84, 0.05),0px 8px 10px 1px rgba(194, 196, 190, 0.06),0px 5px 5px -3px rgba(194, 196, 190, 0.1);
	    background: #FFFFFF;
	    &:first-child{
	      margin-top:0
	    }
	    .hot-header{
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      font-size: 36rpx;
	      color: #6E7080;
	      margin-bottom: 20rpx;
	    }
	    .hot-body{
	      //margin-top: 20rpx;
	      width: 100%;
	      white-space: normal;
	      .hot-body-item{
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        height: 180rpx;
	        width: 100%;
	        .hot-body-left{
	          width: calc(100% - 230rpx);
	          height: 100%;
	          display: flex;
	          margin-right: 10rpx;
	          flex-direction: column;
	          justify-content: space-between;
	          line-height: normal;
	          .hot-body-title{
	            font-size: 28rpx;
	            font-weight: 500;
	            height: 72rpx;
	            color: #21252E;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-line-clamp: 2;
	            -webkit-box-orient: vertical;
	            white-space: normal;
	          }
	          .hot-body-sign{
	            font-size: 24rpx;
	            color: #818496;
	            margin-bottom: 5rpx;
	          }
	          .hot-body-time{
	            font-size: 24rpx;
	            color: #818496;
	          }
	        }
	        .hot-body-right{
	          width: 220rpx;
	          // height: 100%;
	          border-radius: 8rpx;
	          overflow: hidden;
	          position: relative;
	          .static{
	            position: absolute;
	            z-index: 1;
	          }
	          image{
	            width: 100%;
	            height: 100%;
	          }
	        }
	      }
	    }
	  }
	}
</style>
